<template>
  <div class="container">
    <header class="header">
      <h1 class="title">添加宠物</h1>
    </header>

    <form @submit.prevent="addPet" class="pet-form">
      <div class="form-group">
        <label for="name">宠物名</label>
        <input v-model.trim="form.name" type="text" id="name" placeholder="请输入宠物名" required />
      </div>

      <div class="form-group">
        <label for="birthday">出生日期</label>
        <input v-model="form.birthday" type="datetime-local" id="birthday" required />
      </div>

      <div class="form-group">
        <label for="gender">性别</label>
        <select v-model="form.gender" id="gender" required>
          <option value="0">雄性</option>
          <option value="1">雌性</option>
        </select>
      </div>

      <div class="form-group">
        <label for="sterilization">是否绝育</label>
        <input v-model="form.sterilization" type="checkbox" id="sterilization" />
      </div>

      <div class="form-group">
        <label for="weight">重量 (kg)</label>
        <input v-model.number="form.weight" type="number" id="weight" step="0.01" placeholder="请输入宠物重量" required />
      </div>

      <div class="form-group">
        <label for="home_day">到家日期</label>
        <input v-model="form.home_day" type="datetime-local" id="home_day" />
      </div>

      <!-- 用户下拉框 -->
      <div class="form-group">
        <label for="user">选择用户</label>
        <select v-model="form.user" id="user" required>
          <option v-for="user in userList" :key="user.id" :value="user.id">
            {{ user.name }} 
          </option>
        </select>
      </div>

      <!-- 物种下拉框 -->
      <div class="form-group">
        <label for="species">物种</label>
        <select v-model="form.species" id="species" required>
          <option v-for="species in speciesList" :key="species.id" :value="species.id">
            {{ species.species }}
          </option>
        </select>
      </div>

      <button type="submit" class="add-button">添加宠物</button>
    </form>

    <p v-if="successMessage" class="success-message">{{ successMessage }}</p>
    <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";

const form = ref({
  name: "",
  birthday: "",
  gender: "0",
  sterilization: false,
  weight: 0,
  home_day: null,
  user: 0,  // 用户ID
  species: 0,  // 物种ID
});

const speciesList = ref([]);  // 用于存储物种列表
const userList = ref([]);  // 用于存储用户列表
const successMessage = ref("");
const errorMessage = ref("");

// 获取物种数据和用户数据
onMounted(() => {
  Promise.all([
    axios.get("http://127.0.0.1:8000/pet/species/"),
    axios.get("http://127.0.0.1:8000/pet/users/")
  ])
  .then(([speciesRes, usersRes]) => {
    if (speciesRes.data.code === 200) {
      speciesList.value = speciesRes.data.data;
    } else {
      errorMessage.value = "加载物种数据失败";
    }

    if (usersRes.data.code === 200) {
      userList.value = usersRes.data.data;
    } else {
      errorMessage.value = "加载用户数据失败";
    }
  })
  .catch((error) => {
    console.error("请求失败:", error);
    errorMessage.value = "请求失败，请稍后再试。";
  });
});

// 添加宠物函数
const addPet = () => {
  if (!form.value.name || !form.value.birthday || !form.value.user || !form.value.species || !form.value.gender || !form.value.weight) {
    errorMessage.value = "请填写所有必填字段。";
    return;
  }

  // 进一步的验证，例如检查重量是否大于 0
  if (form.value.weight <= 0) {
    errorMessage.value = "宠物的重量必须大于 0 kg。";
    return;
  }

  axios
    .post("http://127.0.0.1:8000/pet/petMsg/", form.value)
    .then((res) => {
      successMessage.value = "宠物添加成功！";
      errorMessage.value = "";
      console.log("添加的宠物数据:", form.value);
      // 重置表单
      form.value = {
        name: "",
        birthday: "",
        gender: "0",
        sterilization: false,
        weight: 0,
        home_day: null,
        user: 0,  // 重置为默认值
        species: 0, // 重置为默认值
      };

      // 5秒后自动清除消息
      setTimeout(() => {
        successMessage.value = "";
        errorMessage.value = "";
      }, 5000);
    })
    .catch((error) => {
      console.error("请求失败:", error);
      errorMessage.value = "请求失败，请稍后再试。";
      successMessage.value = "";
    });
};
</script>

<style scoped>
/* 页面布局 */
.container {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
}

/* 标题样式 */
.header {
  text-align: center;
  padding-bottom: 20px;
}

.title {
  font-size: 2rem;
  color: #333;
  margin: 0;
}

/* 表单布局 */
.pet-form {
  display: grid;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: bold;
  margin-bottom: 8px;
}

.form-group input,
.form-group select {
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus {
  border-color: #3498db; /* 聚焦时的蓝色边框 */
}

/* 按钮样式 */
.add-button {
  background-color: #3498db;
  color: #fff;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s, transform 0.3s;
}

.add-button:hover {
  background-color: #2980b9;
  transform: translateY(-2px); /* 按钮悬浮时轻微上移 */
}

/* 成功和错误消息 */
.success-message,
.error-message {
  padding: 12px;
  border-radius: 8px;
  font-size: 1rem;
  margin-top: 20px;
  text-align: center;
}

.success-message {
  background-color: #dff0d8;
  color: #3c763d;
}

.error-message {
  background-color: #f2dede;
  color: #a94442;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .container {
    padding: 15px;
  }

  .title {
    font-size: 1.8rem;
  }
}
</style>
